window.onload = function () {
    function initDate(province, city, county) {
        // 获取下拉菜单
        let provinceD = document.querySelector('#province');
        let cityD = document.querySelector('#city');
        let countyD = document.querySelector('#county');
        // 声明一个空数组 放置市
        let shiArr = [];
        let quArr = [];
        // 声明一个空字符串
        let strsheng = '';
        // 遍历data 拿到省
        for (let i = 0; i < data.length; i++) {
            const element = data[i];
            strsheng += `<option value="${element.value}">${element.value}</option>`
            // console.log(element.value);
            // 添加
            provinceD.innerHTML = strsheng;

            function renderShi(sheng) {
                // 根据省找到所有市
                for (let i = 0; i < data.length; i++) {
                    if (sheng === data[i].value) shiArr = data[i].children
                }
                
                // 声明一个空字符串
                let strshi = '';
                // 遍历data下的c 拿到市
                for (let i = 0; i < shiArr.length; i++) {
                    const element = shiArr[i];
                    strshi += `<option value="${element.value}">${element.value}</option>`
                    console.log(shiArr);
                    // 添加
                    cityD.innerHTML = strshi;
                    
                    

                }

            }

            function renderQu(city){
                for (let i = 0; i < shiArr.length; i++) {
                    const element = shiArr[i];
                    if(city === element.value)quArr=shiArr[i].children
                }
                let strqu = '';
                for (let i = 0; i < quArr.length; i++) {
                    const element = quArr[i];
                    strqu+=`<option value="${element.value}">${element.value}</option>`
                    countyD.innerHTML = strqu
                }
            }
        }
        renderQu(city)
        renderShi(province);

        provinceD.onchange=function(){
            renderShi(this.value)
        }

        cityD.onchange=function(){
            renderQu(this.value)
        }
    }
    initDate();
}